<style >
* {padding: 0; margin:0}
html,body,#root {
    width: 100%;
    height: 100%;
}
#root{
    display: flex;
}
ul{
    display: flex;
    flex-direction: column;
    padding: 10px 40px;
    text-align: center;
    }
    .zuo{
        width: 200px;
    }
ul li{
    list-style: none;
    font-size: 30px;
    margin-top: 100px;
}
.zuo{
        background-color: #303a4a;
        transition: all .5s;
    }
.you .top{
    height: 50px;
    box-shadow: 0 1px 4px rgb(0 21 41 / 8%);
    margin-bottom: 30px;
    overflow: hidden;
    background-color: #fff;
}
.you{
        flex: 1;
        background-color:pink;
        
}
.you .content >h1{
    background-color: red;
    min-height: 200px;
    padding: 20px;
    height: 80%;
    overflow-y: scroll;
    box-sizing: border-box;
}

</style>
<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="//at.alicdn.com/t/font_3232390_43jiss82gm.css">
<div id="root">
    <div class="zuo" :style="{width: menuWidth}">
        <ul>
            <li @click="who = 'index'">{{menuWidth==='80px'?'后台':'后台首页'}}</li>
            <li @click="who = 'goods'">{{'商品管理' | menuTitleSubStr(menuWidth) }}</li>
            <li @click="who = 'orders'">{{'订单管理' | menuTitleSubStr(menuWidth) }}</li>
        </ul>
        
    </div>
    <div class="you">
        <div class="top">
            <button @click="changeMenuFn" style="height: 30px;background-color: #ccc;">
                 <span :class="iclass"></span>切换菜单</button>
                 <span>首页&gt;</span>
            
            <transition enter-active-class="animated fadeInRight">
                    <span  :key="item.token" style="display: inline-block;" v-for="item in [
                    {id:1, token: 'goods', menu1: '商品管理', menu2: '商品列表'},
                    {id:2, token: 'orders',menu1: '订单管理', menu2: '订单列表'},
                    {id:3, token: 'index', menu1: '首页管理', menu2: '欢迎页'}
                ]" v-if="who === item.token">{{item.menu1}} &gt; {{item.menu2 }}</span> 
            </transition>
        </div>
       
        <div class="content" >
            <transition appear mode="out-in" enter-active-class="animated rotateInUpRight" leave-active-class="animated rotateOutUpLeft">
                <compontent :is="who"></compontent>
            </transition>

        </div>
    </div>


</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>
Vue.component('index', {template: `<h1>首页内容</h1>`})
Vue.component('goods', {template: `<h1>商品内容</h1>`})
Vue.component('orders', {template: `<h1>订单内容</h1>`})
Vue.filter('menuTitleSubStr', (value, menuWidth) => {
    return menuWidth==='80px'? value.substr(0, 2) : value
})
const vm = new Vue({
    el: "#root",
    data: {
        who: 'index',
        menuWidth: '200px',
        iclass:["iconfont", "icon-zuola1"]
        
    },
    methods:{
        changeMenuFn() {
            console.log(this.menuWidth);
            this.menuWidth = this.menuWidth==='80px'? '200px':'80px'
            if(this.menuWidth=='80px') this.iclass=["iconfont", "icon-zuola1"]
            if(this.menuWidth=='200px') this.iclass=["iconfont", "icon-youla1"]
    }
    }
})
</script>